<template>
	<view class="smart-container">
		<!-- 页面头部 -->
		<view class="smart-page-head">
			<view class="smart-page-head-title">Input 输入框</view>
			<view class="smart-page-head-subtitle">多种样式的输入框展示</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="smart-content-wrap">
			<!-- 自动获取焦点 -->
			<view class="input-section">
				<view class="section-label">可自动获取焦点的</view>
				<view class="input-wrapper">
					<input class="smart-input" focus placeholder="自动获取焦点" />
					<view class="input-hint">页面加载时自动聚焦于此输入框</view>
				</view>
			</view>
			
			<!-- 搜索类型 -->
			<view class="input-section">
				<view class="section-label">搜索类型输入框</view>
				<view class="input-wrapper">
					<input class="smart-input search-input" confirm-type="search" placeholder="请输入搜索内容" />
					<view class="input-hint">键盘右下角显示搜索按钮</view>
				</view>
			</view>
			
			<!-- 最大输入长度 -->
			<view class="input-section">
				<view class="section-label">最大输入长度限制</view>
				<view class="input-wrapper">
					<input class="smart-input" maxlength="10" placeholder="最多输入10个字符"/>
					<view class="input-hint">已输入 <text class="count-text">{{inputLength}}</text>/10 个字符</view>
				</view>
			</view>
			
			<!-- 同步获取输入值 -->
			<view class="input-section">
				<view class="section-label">
					同步获取输入值
					<text class="value-display">{{ inputValue || '暂无输入' }}</text>
				</view>
				<view class="input-wrapper">
					<input class="smart-input" @input="onKeyInput" placeholder="输入内容实时显示在上方"/>
				</view>
			</view>
			
			<!-- 数字输入 -->
			<view class="input-section">
				<view class="section-label">数字输入框</view>
				<view class="input-wrapper">
					<input class="smart-input" type="number" placeholder="请输入数字"/>
					<view class="input-hint">键盘将显示数字键盘</view>
				</view>
			</view>
			
			<!-- 密码输入 -->
			<view class="input-section">
				<view class="section-label">密码输入框</view>
				<view class="input-wrapper">
					<input class="smart-input" type="text" password placeholder="请输入密码"/>
					<view class="input-hint">输入内容将以圆点显示</view>
				</view>
			</view>
			
			<!-- 带小数点输入 -->
			<view class="input-section">
				<view class="section-label">带小数点输入框</view>
				<view class="input-wrapper">
					<input class="smart-input" type="digit" placeholder="请输入带小数点的数字" />
					<view class="input-hint">键盘将显示带小数点的数字键盘</view>
				</view>
			</view>
			
			<!-- 身份证输入 -->
			<view class="input-section">
				<view class="section-label">身份证输入框</view>
				<view class="input-wrapper">
					<input class="smart-input" type="idcard" placeholder="请输入身份证号码"/>
					<view class="input-hint">键盘将优化身份证输入体验</view>
				</view>
			</view>
			
			<!-- 带清除按钮 -->
			<view class="input-section">
				<view class="section-label">带清除按钮的输入框</view>
				<view class="input-wrapper">
					<view class="input-with-clear">
						<input class="smart-input" :value="clearinputValue" @input="clearInput" placeholder="输入内容后显示清除按钮"/>
						<text v-if="showClearIcon" @click="clearIcon" class="uni-icon clear-icon">×</text>
					</view>
				</view>
			</view>
			
			<!-- 可查看密码 -->
			<view class="input-section">
				<view class="section-label">可切换显示/隐藏的密码框</view>
				<view class="input-wrapper">
					<view class="input-with-eye">
						<input class="smart-input" placeholder="请输入密码" :password="showPassword" />
						<text class="uni-icon eye-icon" :class="[!showPassword ? 'eye-active' : '']" @click="changePassword">
							{{showPassword ? '👁️' : '👁️‍🗨️'}}
						</text>
					</view>
					<view class="input-hint">点击眼睛图标切换密码可见性</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				inputLength: 0,
				showPassword: true,
				clearinputValue: '',
				showClearIcon: false
			};
		},
		methods: {
			onKeyInput: function(event) {
				this.inputValue = event.detail.value;
				this.inputLength = event.detail.value.length;
			},
			clearInput: function(event) {
				this.clearinputValue = event.detail.value;
				this.showClearIcon = event.detail.value.length > 0;
			},
			clearIcon: function() {
				this.clearinputValue = '';
				this.showClearIcon = false;
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			}
		}
	}
</script>

<style>
	.smart-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
	}
	
	/* 页面头部样式 */
	.smart-page-head {
		padding: 40rpx 30rpx 30rpx;
		background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
		color: white;
		border-radius: 0 0 30rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(106, 17, 203, 0.3);
		margin-bottom: 30rpx;
	}
	
	.smart-page-head-title {
		font-size: 42rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.smart-page-head-subtitle {
		font-size: 28rpx;
		opacity: 0.9;
	}
	
	/* 内容区域 */
	.smart-content-wrap {
		padding: 0 30rpx 60rpx;
	}
	
	/* 输入区域 */
	.input-section {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s, box-shadow 0.2s;
	}
	
	.input-section:active {
		transform: translateY(4rpx);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.section-label {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.value-display {
		color: #6a11cb;
		font-weight: normal;
		font-size: 28rpx;
		background: #f0f4ff;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.count-text {
		color: #6a11cb;
		font-weight: bold;
	}
	
	.input-wrapper {
		position: relative;
	}
	
	/* 输入框样式 */
	.smart-input {
		width: 100%;
		height: 88rpx;
		padding: 0 28rpx;
		border: 2rpx solid #e1e5ee;
		border-radius: 16rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		background: #fafbfc;
		transition: all 0.3s;
	}
	
	.smart-input:focus {
		border-color: #6a11cb;
		background: white;
		box-shadow: 0 0 0 4rpx rgba(106, 17, 203, 0.1);
	}
	
	/* 搜索输入框特殊样式 */
	.search-input {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: 28rpx center;
		background-size: 36rpx;
		padding-left: 80rpx;
	}
	
	/* 输入提示 */
	.input-hint {
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
	}
	
	/* 带清除按钮的输入框 */
	.input-with-clear,
	.input-with-eye {
		position: relative;
	}
	
	.clear-icon,
	.eye-icon {
		position: absolute;
		right: 28rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40rpx;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.2s;
	}
	
	.clear-icon {
		color: #999;
		background: #f0f0f0;
	}
	
	.clear-icon:active {
		background: #e0e0e0;
	}
	
	.eye-icon {
		color: #999;
		background: rgba(240, 240, 240, 0.8);
		font-size: 32rpx;
	}
	
	.eye-active {
		color: #6a11cb;
		background: rgba(106, 17, 203, 0.1);
	}
	
	.eye-icon:active {
		transform: translateY(-50%) scale(0.95);
	}
	
	@media (max-width: 750rpx) {
		.smart-page-head {
			padding: 30rpx 20rpx 20rpx;
		}
		
		.smart-content-wrap {
			padding: 0 20rpx 40rpx;
		}
		
		.input-section {
			padding: 24rpx;
			margin-bottom: 24rpx;
		}
	}
</style>